<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="divTitle">批量添加</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />

    <style type="text/css">
        *, body {
            margin: 0px;
            font-family: '微软雅黑';
        }
    </style>
    <script src="~/js/generic.js"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/Content/easyui.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Content/icon.css}" />
    <script th:src="@{/js/EasyUI/jquery.min.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.ui.widget.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.iframe-transport.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.fileupload.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.fileupload-process.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.fileupload-validate.js}"></script>
    <script th:src="@{/js/EasyUI/jquery.fileupload-ui.js}"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/
        //
        var roleId = "";
        var roleName = "";

        $(function () {
            //==========角色的下拉========================================
            $.ajax({
                async: false,
                type: "POST",
                url: "/User/getAllRoleCombobox",
                dataType: "json",
                data: {
                    warehouse:$("#role").val(),
                },
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#role").append("<option th:text=\"${data[i].name}\"></option>");
                    }
                }
            });
            //=================================
            $('#fileupload').fileupload({
                url: "/User/UploadFiles",
                dataType: 'json',
                replaceFileInput: false,//显示已选择文件文件名(必须)
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css('width', progress + '%');
                },
                add: function (e, data) {
                    //判断文件类型，此例限制为：Excel文件
                    var fileType = data.files[0].name.split('.').pop();
                    var acceptFileTypes = /xls|xlsx$/i;
                    if (!acceptFileTypes.test(fileType)) {
                        $("#startBtn").hide();//隐藏上传按钮
                        alert("不支持的文件类型，仅支持EXCEL文件");
                        return;
                    }
                    //判断文件大小，此例限制为：1mb：
                    //var size = data.files[0].size;
                    //size = (size / 1024).toFixed(2);//文件大小单位kb
                    //var maxFileSize = 1024;//1mb=1024kb
                    //if (size > maxFileSize) {
                    //    $("#startBtn").hide();//隐藏上传按钮
                    //    alert("文件大小：" + size + "KB,超过最大限制：" + maxFileSize + "KB");
                    //    return;
                    //}
                    $("#startBtn").show();//显示上传按钮
                    //点击上传按钮开始上传
                    data.context = $('#startBtn').click(function () {
                        data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                        data.submit();
                    });
                },
                done: function (e, data) {
                    data.context = $('<p/>').text("文件上传成功!").replaceAll($(this));

                    $("#tab1").empty();
                    $('#tab1').append("<tr><th>用户名</th><th>姓名</th><th>密码</th><th>联系电话</th><th>电子邮件</th><th>院系单位</th><th>联系地址</th></tr>");
                    $.ajax({
                        type: "GET",
                        url: "/User/ReadFile",
                        data: {},
                        dataType: "json",
                        success: function (result) {
                            var html = '';
                            for (var i = 0; i < result.length; i++) {
                                html += '<tr>';
                                //html += '<td>' + result[i].no + '</td>';
                                html += '<td>' + result[i].userid + '</td>';
                                html += '<td>' + result[i].username + '</td>';
                                html += '<td>' + result[i].password + '</td>';
                                html += '<td>' + result[i].phone + '</td>';
                                html += '<td>' + result[i].email + '</td>';
                                html += '<td>' + result[i].depart + '</td>';
                                html += '<td>' + result[i].address + '</td>';
                                html += '</tr>';
                            }
                            $('#tab1').append(html);
                        }
                    });

                },
                change: function (e, data) {
                    if (data.files.length > 1) {
                        $("#startBtn").hide();//隐藏上传按钮
                        alert("只能选择1个文件");
                        return false;
                    }
                },
                drop: function (e, data) {
                    if (data.files.length > 1) {
                        $("#startBtn").hide();//隐藏上传按钮
                        alert("只能选择1个文件");
                        return false;
                    }
                },
            });
        });

        function saveInfo() {
            roleName = $("#role").val();
            $.post('/User/BatchSubmit', { roleName: roleName }, function (result) {
                if (result.status == 0) {
                    alert(result.msg);
                    location.href = "/User/List";
                } else {
                    alert(result.msg);
                }
            },'json');
        }
        /*]]>*/
    </script>
</head>

<body>

<!--<div th:replace="top :: top"></div>-->
<form id="filePost" method="post" enctype="multipart/form-data" onsubmit="return false;">
    <table class="maintable">
        <tr>
            <td class="rightmaintd" valign="top">
                <div style="width:920px;margin:10px auto;"> <a href="/user/list">&lt; 返回</a> </div>
                <div style="margin-left:300px;margin-top:20px">
                    <span>用户类型</span>
                    <select name="role" id="role" style="width:180px;margin-left:10px"></select>
                </div>
                <div style="margin-left:300px;margin-top:20px">
                    <input id="fileupload" type="file" name="multiFiles" multiple />
                    <input type="button" id="startBtn" value="上传Excel" class="denglubtn">
                    <a target="_blank" data-icon="arrow-down" class="btn btn-green" th:href="@{/Template/user.xlsx}">下载模板</a>
                </div>
                <div style="margin-left:300px;margin-top:20px">
                    <input type="button" value="提&nbsp;&nbsp;交" class="denglubtn" onclick="saveInfo();">
                </div>
                <div id="progress" style="margin-left:300px;margin-top:20px">
                    <div class="progressbar" style="width:0%"></div>
                </div>
                <br />
                <table border="1" id="tab1" style="margin-left:300px"></table>
                <table class="logintable" cellpadding="8" style="margin-top:20px;">
                </table>
            </td>
        </tr>
    </table>
</form>
<!--<div th:replace="bottom :: bottom"></div>-->

</body>
</html>
